<template>
    <el-calendar ref="calendar">
        <template #header="{ date }">
            <el-button size="small" @click="selectDate('prev-month')">
                上个月
            </el-button>
            <span class="title">{{ date }}</span>
            <el-button size="small" @click="selectDate('next-month')">
                下个月
            </el-button>

        </template>
    </el-calendar>
</template>

<script setup lang="ts">

import type { CalendarDateType } from 'element-plus'

import { dayjs } from "element-plus"
import 'dayjs/locale/zh-cn'
const calendar = ref()
const selectDate: any = (val: CalendarDateType) => {
    if (!calendar.value) return
    calendar.value.selectDate(val)
}

const weekdaysShort = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
dayjs.locale({
    ...dayjs.Ls['zh-cn'],
    weekdaysMin: weekdaysShort,
}, undefined, true);
</script>

<style lang="scss" scoped >
::v-deep.el-calendar-day span {
    float: right;
}

.title {
    font-size: 18px;
    font-weight: 700;
}
</style>